<template>
  <div class="Main">
    <SearchCard>
      <template #one>
        <Search :stuta-list="stutaList" @searchFn="searchFn" />
      </template>
    </SearchCard>
    <comTable :table-cell-list="tableCellList" :table-data="tableData">
      <template #header>
        <TableBtn>
          <template #AddBTn>
            <el-button class="tableBtn" @click="addFn">
              新增仓库
            </el-button>
          </template>
          <template #xlsx>
            <div>
              <el-button class="tableBtn" @click="xlsxImportFn">
                导入
              </el-button>
              <el-button class="tableBtn" @click="xlsxOutFn">
                导出
              </el-button>
            </div>
          </template>
        </TableBtn>
      </template>
      <template #Btn="{scope}">
        <el-button type="text" size="small" class="txtBtn" @click="subTextFn(scope.row)">编辑</el-button>
        <el-button type="text" size="small" class="txtBtn" @click="changeStatusFn(scope.row)">{{ scope.row.status==='启用'?'停用':'启用' }}</el-button>
      </template>
      <template #bottomPage>
        <keep-alive :include="['PageFlex','TableView']">
          <pageFlex :total="total" :page-data="pageData" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
        </keep-alive>
      </template>
    </comTable>
    <smallDialog :change-visible="changeVisible" :row-data="rowData" @closeFn="closeFn" @changeBtnFn="changeBtnFn" />
  </div>
</template>

<script>
import { getWarehouseList, changeWarehouse, getcode } from '@/api'
import SearchCard from '@/components/SearchCard'
import comTable from '@/components/comTable'
import TableBtn from '@/components/TableBtn'
import pageFlex from '@/components/pageFlex'
import smallDialog from '@/components/smallDialog'
import Search from './components/Search'
export default {
  name: 'TableView',
  components: {
    SearchCard,
    comTable,
    TableBtn,
    pageFlex,
    smallDialog,
    Search
  },
  data() {
    return {
      tableCellList: [
        {
          label: '仓库编码',
          prop: 'code'
        },
        {
          label: '仓库名称',
          prop: 'name'
        },
        {
          label: '仓库类型',
          prop: 'type'
        },
        {
          label: '省/市/区',
          prop: 'location',
          width: '300'
        },
        {
          label: '详细地址',
          prop: 'address'
        },
        {
          label: '仓库状态',
          prop: 'status'
        },
        {
          label: '仓库面积m²',
          prop: 'surface'
        },
        {
          label: '库区数量',
          prop: 'includedNum'
        },
        {
          label: '负责人',
          prop: 'personName'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '更新时间',
          prop: 'updateTime'
        }
      ],
      changeVisible: false,
      pageTotal: 100,
      inptList: [0, 1, 5],
      stutaList: [{ label: '全部', status: '' }, { label: '停用', status: 0 }, { label: '启用', status: 1 }],
      tableData: [],
      pageData: {
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      formLabelList: [
        {
          label: '仓库编码',
          type: 'input',
          data: 'code',
          disabled: 'true'
        },
        {
          label: '仓库名称',
          type: 'input',
          data: 'name',
          maxlength: '10'
        }, {
          label: '仓库类型',
          type: 'select',
          data: 'type'
        }, {
          label: '省/市/区',
          type: 'cascader',
          data: 'location',
          class: 'inputStyleBl'

        },
        {
          label: '详细地址',
          type: 'input',
          data: 'address',
          class: 'inputStyleBl'
        },
        {
          label: '仓库状态',
          type: 'radio',
          data: 'status'

        },
        {
          label: '仓库面积',
          // type: 'input',
          // rule: "value=value.replace(/[^0123456789^\.]+/g,'')",
          data: 'surface'
        },
        {
          label: '负责人',
          type: 'input',
          data: 'personName',
          maxlength: '10'

        },
        {
          label: '联系电话',
          type: 'input',
          data: 'phone'
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trggier: ['change', 'blur'] }
        ],
        type: [
          { required: true, message: '请输入仓库类型', trggier: ['change', 'blur'] }
        ],
        location: [
          { required: true, message: '请输入区域' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trggier: ['change'] }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trggier: ['change'] }
        ],
        status: [
          { required: true, message: '请选择仓库状态' }
        ]
      },
      houseType: {
        'ZZ': '中转仓',
        'JG': '加工仓',
        'CB': '储备仓',
        'LC': '冷藏仓'
      },
      rowType: {
        '中转仓': 'ZZ',
        '加工仓': 'JG',
        '储备仓': 'CB',
        '冷藏仓': 'LC'
      },
      statusList: {
        '0': '停用',
        '1': '启用'
      },
      total: 0,
      rowData: {},
      currentPageSize: 1
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    xlsxImportFn() {},
    xlsxOutFn() {
      import('@/vendor/Export2Excel').then(async excel => {
        const headers = {
          '仓库编码': 'code',
          '仓库名称': 'name',
          '仓库类型': 'type',
          '省/市/区': 'location',
          '详细地址': 'address',
          '仓库状态': 'status',
          '仓库面积': 'surface',
          '库区数量': 'includedNum',
          '负责人': 'personName',
          '联系电话': 'phone',
          '更新时间': 'updateTime'

        }
        const res = this.tableData
        console.log(res)
        const data = this.formatJson(headers, res)
        console.log(data)
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data: data,
          filename: '用户信息表',
          autoWidth: true,
          bookType: 'xlsx'

        })
      })
    },

    // 获取渲染数据
    async fetchList() {
      const res = await getWarehouseList(this.pageData)
      this.total = +res.data.data.total
      this.tableData = res.data.data.records
      this.tableData = this.tableDataStyle(this.tableData)
      console.log(this.tableData)
    },
    tableDataStyle(arr) {
      arr.forEach(item => {
        item.type = this.houseType[item.type]
        item.status = this.statusList[item.status]
      })
      return arr
    },
    // 根据xx条/页
    handleSizeChange(val) {
      this.pageData = {
        current: 1,
        size: val,
        descs: 'createTime'
      }
      this.fetchList()
    },
    // 根据当前页码渲染数据
    handleCurrentChange(val) {
      this.pageData = {
        current: val,
        size: 10,
        descs: 'createTime'
      }
      this.fetchList()
    },
    // 打开修改仓库状态弹窗
    changeStatusFn(row) {
      this.rowData = row
      this.changeVisible = true
    },
    // 关闭停启用弹窗
    closeFn() {
      this.changeVisible = false
    },
    // 修改仓库状态功能
    async changeBtnFn() {
      await changeWarehouse({
        id: this.rowData.id,
        status: this.rowData.status === '启用' ? 0 : 1
      })
      this.handleCurrentChange(1)
      this.changeVisible = false
    },
    // 搜索功能
    searchFn(val) {
      this.pageData = { ...this.pageData, ...val }
      this.pageData.total = ''
      this.pageData.current = 1
      this.fetchList()
    },
    // 编辑功能
    subTextFn(row) {
      // console.log(row)
      row.type = this.rowType[row.type]
      row.status === '启用' ? row.status = 1 : row.status = 0
      this.$router.push({
        name: 'details',
        params: {
          row: row,
          name: '修改',
          id: row.id,
          formLabelList: this.formLabelList,
          rules: this.rules
        }
      })
    },
    async addFn() {
      const res = await getcode({ name: 'CK' })
      // console.log(res.data)
      this.$router.push({
        name: 'details',
        params: {
          row: { code: res.data.data },
          name: '新增',
          id: 'null',
          formLabelList: this.formLabelList,
          rules: this.rules
        }
      })
    },
    formatJson(headers, rows) {
      return rows.map(item => {
        return Object.keys(headers).map(key => {
          return item[headers[key]]
        })
      })
    }
  }
}
</script>

<style>
.Main{
  padding: 50px;
}
</style>
